<template>
	<view class="warp">
		<top-nav title="恢复钱包"></top-nav>
		<view class="title">
			请按顺序填写助记词，<br>确保备份正确
		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in 12" :class="index==10||index==11||index==9?'noborder':''">
				<view class="info">
					<u-input type="text" height="50" :custom-style="inputClass1" inputAlign="center" placeholder="" />
				</view>
			</view>
		</view>
		<view class="input">
			<view class="list">
				<view class="label">钱包密码</view>
				<view class="input-content">
					<u-input type="password" :custom-style="inputClass" placeholder="请输入密码" />
				</view>
			</view>
			<view class="list">
				<view class="label">确定密码</view>
				<view class="input-content">
					<u-input type="password" :custom-style="inputClass" placeholder="请重新输入新密码" />
				</view>
			</view>
		</view>
		<view class="bottom">
			<my-button @clickFun="clickFun">恢复</my-button>
		</view>
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	import button from './components/button.vue'
	export default{
		data(){
			return{
				inputClass:{
					color:'#ffffff',
					fontSize: '36rpx'
				},
				inputClass1:{
					color:'#ffffff',
					height:'50rpx',
					fontSize: '28rpx'
				},
				list:[],
				buttonList:[{
					value:'qwer',
					selected: 0
				}]
			}
		},
		components:{
			'topNav':topNav,
			'myButton': button
		},
		created(){
			this.list = new Array(12).fill('');
			this.buttonList = new Array(12).fill({
				value:'qwer',
				selected: 0
			})
		},
		methods:{
			clickFun(){
				uni.navigateTo({
				    url: '/pages/home/home'
				});
			},
			selectFun(itemInfo,index){
				this.buttonList = this.buttonList.map((item,i)=>{
					if(i == index){
						item = {
							value: 'qwer',
							selected: 1
						}
					}
					return item
				})
				let flag = true
				this.list = this.list.map((item,i)=>{
					if(!item && flag){
						flag = false;
						item = itemInfo.value
					}
					return item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp{
		padding: 0 37*2rpx;
		.title{
			font-size:24*2rpx;
			margin:30*2rpx 0 18*2rpx;
			font-size: 24*2rpx;
		}
		.content{
			display: flex;
			flex-wrap: wrap;
			background-color: #F1F1F1;
			text-align: center;
			.list{
				flex:1 0 33.33%;
				background-color: rgba(0,0,0,0.9);
				border-bottom:1rpx solid #F1F1F1;
				box-sizing: border-box;
				height:60*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				&:not(:nth-child(3n+3)){
					border-right:1rpx solid #F1F1F1;
				}
				&.noborder{
					border-bottom:0;
					height:70*2rpx;
				}
				.info{
					flex:1;
					margin:0 20rpx;
					height:25*2rpx;
					line-height:25*2rpx;
					font-size:12*2rpx;
					background-color: rgba(255,255,255,0.1);
					border-radius: 25rpx;
				}
			}
		}
		.input{
			margin-top:30*2rpx;
			margin-bottom:130*2rpx;
			.list{
				margin-bottom:30*2rpx;
				.label{
					font-size:14*2rpx;
					opacity: 0.5;
				}
			}
		}
		.bottom{
			height:110*2rpx;
			background-color: #202020;
			width: 100%;
			bottom: 0;
			position: fixed;
			left:0;
		}
	}
</style>
